<!DOCTYPE html>
<html lang="zh" xml:lang="zh">
<head>
    <meta charset='utf-8'>
    <title>Map</title>
    <script type='text/javascript' src="../../ref/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../../ref/ol.css" type="text/css">
    <script type='text/javascript' src="../../ref/ol.js"></script>
    <link rel="stylesheet" type="text/css" href="001.css">
    <script src="../../ref/echarts-all.js"></script>
    <link rel="stylesheet" href="../../../wjdc/easyui/css/icon.css"/>
    <link rel="stylesheet" href="../../../wjdc/easyui/css/easyui.css"/>
    <script src="../../../wjdc/easyui/js/jquery.easyui.min.js"></script>
    <script src="../../../wjdc/easyui/js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<div class="left">
    <div class="leftTitle">
        <div class="tool">
            <span class="_cityLabel">城市:</span><select class="_city" type="text" id="selectid"></select>

            <div class="select">
                <input id="sateButton1" class="select_btn" type="button" value="国控站点"></input>
                <input id="sateButton2" class="select_btn" type="button" value="省控站点"></input>
            </div>


        </div>

        <div class="chart">
            <div class="c_w_1">
                <span id="tqname"></span>
            </div>


            <div class="c_w_3">
                <div class="w_1">
                    <img id="img2" src="ico/weather/4.png"></img>
                    <span>温度:</span>
                    <span class="w_data" id="tqwd"></span>度
                    </br>

                    <table style="margin-left:10px;">
                        <tr>
                            <td style="width:141px">风向:<span id="tqfx"></span></td>
                            <td style="width:141px!important;">能见度:<span id="tqnjd"></span></td>
                            <td style="width:141px">湿度:<span id="tqsd"></span></td>
                        </tr>
                        <tr>
                            <td>风速:<span id="tqfs"></span></td>
                            <td>气压:<span id="tqty"></span></td>
                            <td>降水量:<span id="tqjsl"></span></td>
                        </tr>
                    </table>


                </div>


            </div>
        </div>
    </div>

    <div class="leftData">
        <div class="_0021">
            <h3>数据日期： <input id="dt" type="text" name="birthday" style="width: 160px;top:9px;left:159px;position:absolute;height: 30px">
            </h3>
            <table class="table" cellpadding="0" cellspacing="0">
                <tr class="tabletitle">
                    <td>序号</td>
                    <td>监测站点</td>
                    <td>PM2.5</td>
                    <td>PM10</td>
                    <td>SO2</td>
                    <td>NO2</td>
                    <td>CO</td>
                    <td>O3</td>

                </tr>
            </table>
        </div>

        <div class="_0022">
            <table class="table" cellpadding="0" cellspacing="0">
                <tbody id="tabledata">
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="right">
    <div class="index">
        <ul>
            <li id="indexButton1"><span>PM2.5</span></li>
            <li id="indexButton2">PM10</li>
            <li id="indexButton3">SO2</li>
            <li id="indexButton4">NO2</li>
            <li id="indexButton5">CO</li>
            <li id="indexButton6">O3</li>

        </ul>
    </div>
    <div id="bt7">
        <input id="layerButton1" class="bt7_btn" type="button" value="卫星图"></input>
        <input id="layerButton2" class="bt7_btn" type="button" value="道路图"></input>
        <input id="layerButton3" class="bt7_btn" type="button" value="地形图"></input>
    </div>


    <!--地图及弹窗-->
    <div id="map" style="width:100%;height:100%;">

        <div id="popu" class="popu">
            <div id="popu-closer" class='popu-closer'>
                <div id="_close"></div>
            </div>
            <div id="popu-content">
                <div id="popuContent-title">
                    <h4>城市详情 :</h4>
                    <h2 id="popu-city"></h2>
                    <!--  <div id="popu_button">
                        <div id="popu_button_1"></div>
                        <div id="popu_button_2"></div>
                    </div>-->
                </div>
                <hr class="topline"></hr>
                <div id="popuContent-body">
                    <!--  <div id="popuContent-body-left">
                        <div id="weatherContent"></div>
                    </div>-->
                    <div id="popuContent-body-right">
                        <div class="popu-block popu-1">
                            <div id="_color8" class="popu-text">空气质量</div>
                            <p id="popu-8"></p>
                        </div>
                        <br/>
                        <br/>
                        <br/>
                        <div class="popu-block ">
                            <div id="_color1" class="popu-text">PM2.5</div>
                            <p id="popu-1"></p>
                        </div>

                        <div class="popu-block">
                            <div id="_color2" class="popu-text">PM10</div>
                            <p id="popu-2"></p>
                        </div>
                        <div class="popu-block">
                            <div id="_color3" class="popu-text">SO2</div>
                            <p id="popu-3"></p>
                        </div>
                        <div class="popu-block">
                            <div id="_color4" class="popu-text">NO2</div>
                            <p id="popu-4"></p>
                        </div>
                        <div class="popu-block">
                            <div id="_color5" class="popu-text">CO</div>
                            <p id="popu-5"></p>
                        </div>
                        <div class="popu-block">
                            <div id="_color6" class="popu-text">O3</div>
                            <p id="popu-6"></p>
                        </div>
                        <!-- <div  class="popu-block">
                            <div  id="_color7"  class="popu-text"></div>
                            <p id="popu-7"></p>
                            </div>
                         -->
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script type='text/javascript' src="001.js"></script>
</body>
</html>
